<template>
  <div class="container">
    <div class="top" @click="back">
      管理 >> <span>任命评委</span>
    </div>
    <div class="search">
      <el-icon>
        <User/>
      </el-icon>
      <span>姓名查找</span>
      <input type="text" placeholder="输入评委姓名" v-model="value">
      <el-button round type="success" @click="search">搜索</el-button>
    </div>
    <div class="option">
  <span :class="i==now?'active':''" v-for="(item ,i ) in option" :key="i" @click="change(i)">
    {{ item }}
  </span>
    </div>
    <div class="judge">
      <div class="title">
        已选评委
      </div>
      <div class="table">
        <div style="width: 850px;">
          <el-table ref="tableRef" :data="judge[0]" style="width: 100%">
            <el-table-column
                prop="name"
                label="姓名"
                sortable
                width="180"

            />
            <el-table-column prop="telephone" label="电话" width="200" />
            <el-table-column
                prop="start"
                label="start"
                width="180"

            />
            <el-table-column
                prop="end"
                label="end"
                width="180"
            />

            <el-table-column fixed="right" label="Operations" width="120">
              <template #default="scope">
                <el-button
                    link
                    type="primary"
                    size="small"
                    @click.prevent="Edit(scope.$index)"
                >
                  delete
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <div class="list">
      <div style="max-width: 750px; margin:0 10px;">
        <el-table :data="list[0]" style="width: 100%">
          <el-table-column fixed prop="name" label="姓名" width="120"/>
          <el-table-column prop="college" label="学院" width="220"/>
          <el-table-column prop="telephone" label="电话" width="250"/>
          <el-table-column fixed="right" label="Operations" width="120">
            <template #default="scope">
              <el-button
                  link
                  type="primary"
                  size="small"
                  @click.prevent="Select(scope.$index)"
              >
                select
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="height: 20px;"></div>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="handleCurrentChange"/>
      </div>
      <div style="display: flex; flex-direction: column;margin: 10px">
        <el-button text @click="add" style="color: #409EFF"
        >添加外校老师
        </el-button
        >
        <el-button text @click="isAppoint = true" style="color: #409EFF"
        >一键任命
        </el-button
        >
        <el-button text @click="excel" style="color: #409EFF"
        >导出结果
        </el-button
        >

      </div>
    </div>


    <el-dialog v-model="dialogTableVisible" :title="'分配任务--作品总数：'+workTotal">
      <el-form :model="tem" label-width="120">
        <el-form-item label="姓名" :label-width="200">
          <el-input v-model="tem.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="start" :label-width="200">
          <el-input v-model="tem.start" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="end" :label-width="200">
          <el-input v-model="tem.end" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogTableVisible = false">Cancel</el-button>
        <el-button type="primary" @click="confirm">
          Confirm
        </el-button>
      </span>
      </template>
    </el-dialog>

    <el-dialog v-model="centerDialogVisible" title="Warning" width="30%" center>
    <span>
     确认删除吗？？？
    </span>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="Delete">
          Confirm
        </el-button>
      </span>
      </template>
    </el-dialog>

    <el-drawer
        ref="drawerRef"
        v-model="dialog"
        :title="'分配任务--作品总数：'+workTotal"

        direction="ltr"
        class="demo-drawer"
    >
      <div class="demo-drawer__content">
        <el-form :model="form" label-width="40">
          <el-form-item label="姓名">
            <el-input v-model="form.name" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.telephone" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="start">
            <el-input v-model="form.start" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="end">
            <el-input v-model="form.end" autocomplete="off"/>
          </el-form-item>

        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">Cancel</el-button>
          <el-button type="primary" @click="onClick">
            添加
          </el-button>
        </div>
      </div>
    </el-drawer>

    <el-dialog v-model="isAppoint" title="Warning" width="30%" center>
    <span>
     提交前确保信息无误
    </span>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="isAppoint = false">Cancel</el-button>
        <el-button type="primary" @click="Appoint">
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {useRouter, useRoute} from "vue-router";
import {ref, inject, reactive, onMounted} from 'vue'
import * as XLSX from "xlsx";

const isAppoint = ref(false)
const total = ref(100)
const axios = inject("$axios")
const value = ref('')
const router = useRouter()
const route = useRoute()
const centerDialogVisible = ref(false)
const form = reactive({
  name: "",
  field: "",
  telephone: "",
  start: 0,
  end: 0
})
const resultList = reactive([])
const now = ref(route.params.now)
//删除已选评委的id
const id = ref(0)
const workTotal = ref(0)
const dialogTableVisible = ref(false)
const tem = reactive({
  telephone: "",
  start: 1,
  end: 1,
  field: '',
  name: "",
  id: ""
})
const option = reactive([
  '人文社科调研报告',
  '信息技术类',
  '机械控制类',
  '生化环材类',
  '文化科技创意类'
])
const back = () => router.push('/manage')
const dialog = ref(false)
const drawerRef = ref()
const onClick = () => {

  if (form.end > workTotal || form.start < 1)
    ElMessage({
      message: "请填写有效信息",
      type: "error"
    })
  else
    axios.post('judge', form).then(res => {
      if (res.code == 1) {
        ElMessage({
          message: res.data,
          type: 'success'
        })
        window.location.reload()
      }
    }).catch(err => {
      ElMessage({
        message: "服务器异常",
        type: "error"
      })
      console.log(err)
    })
  drawerRef.value?.close()

}
const judge = reactive([
  []
])
const change = (i) => {
  now.value = i
  axios.get("sub/count?field=" + option[i]).then(res => {
    workTotal.value = res.data
  })
  axios.get('judge/selected?field=' + option[i]).then(res => {
    judge[0] = res.data
  })
  window.location.href = '/setJudge/' + now.value

}
const list = reactive([[]])
const search = () => {
  if (value.value.trim() == '') {
    ElMessage({
      showClose: true,
      message: '请输入姓名',
      type: 'error',
    })
  } else {
    axios.get("user/teacher/find?name=" + value.value).then(res => {
      if (res.code == 1) list[0] = res.data
      else ElMessage({
        type: 'error',
        message: res.msg
      })
    }).catch(err => {
          ElMessage({
            type: 'error',
            message: "服务器异常"
          })
        }
    )
  }
}
onMounted(() => {
  axios.get("user/teacher?p=1&s=10").then(res => {
    list[0] = res?.data?.data
    total.value = res?.data?.total
  })

  axios.get('judge/selected?field=' + option[now.value]).then(res => {
    judge[0] = res.data
  })
    axios.get("sub/count?field=" + option[now.value]).then(res => {
    workTotal.value = res.data
  })
})
const Edit = (i) => {
  id.value = i
  centerDialogVisible.value = true
}
const Select = (i) => {
  tem.field = option[now.value]
  tem.telephone = list[0][i].telephone
  tem.name = list[0][i].name
  dialogTableVisible.value = true

}
const handleCurrentChange = val => {
  axios.get("/user/teacher?p=" + val + "&s=10").then(res => {
    console.log(res)
    list[0] = res.data?.data
  }).catch(err => {

  })
}
const confirm = () => {
  if (tem.end > workTotal || tem.start < 1)
    ElMessage({
      message: "请填写有效信息",
      type: "error"
    })
  else
    axios.post('judge', tem).then(res => {
      if (res.code == 1) {
        ElMessage({
          message: res.data,
          type: 'success'
        })
        window.location.reload()
      }
    }).catch(err => {
      ElMessage({
        message: "服务器异常",
        type: "error"
      })
      console.log(err)
    })
}
const Delete = () => {
  axios.get('judge/delete?id=' + judge[0][id.value].id + '&field=' + option[now.value]).then(res => {
    window.location.reload()
  })

  centerDialogVisible.value = false
}
const cancelForm = () => {
  dialog.value = false
}
const add = () => {
  dialog.value = true
  form.field = option[now.value]
}
const Appoint = () => {
  axios.get("judge/list").then(res => {
    axios.post('judge/set', res.data).then(res => {
      ElMessage({
        message: res.data,
        type: "success"
      })
      setTimeout(() => {
        router.push("/manage")
      }, 1000)
    })
  })
}
 const excel = () => {
  axios.get("user/judge").then(res => {
    const workbook = XLSX.utils.book_new();
// 创建一个新的工作表
    const worksheet = XLSX.utils.json_to_sheet(res.data);
// 将工作表附加到工作簿，并将工作表命名为students
    XLSX.utils.book_append_sheet(workbook, worksheet, "评委列表");
// 导出工作簿，并命名导出文件名为Presidents.xlsx
    var currentTime = new Date();
    XLSX.writeFile(workbook, '评委列表'+".xlsx");
  }).catch(err => {
  })
}
</script>

<style scoped lang="less">
.container {
  width: 90%;
  max-width: 1200px;
  margin: 10px auto;
  padding-bottom: 20px;

  .top {
    font-size: 14px;
    color: #A8ABB2;
    margin: 20px;

    span {
      color: #409EFF;
    }
  }

  .search {
    text-align: center;
    width: 90%;
    background-color: #409EFF;
    border-radius: 10px;
    height: 80px;
    margin: 10px auto;
    color: #ffffff;
    font-size: 14px;
    line-height: 80px;
    padding: 0 20px;
    box-sizing: border-box;

    input {
      border: none;
      height: 30px;
      width: 300px;
      border-radius: 15px;
      margin: auto 20px;
      text-indent: 1em;

    }

  }

  .option {
    width: 90%;
    margin: 20px auto;

    span {
      margin: 10px 20px;
      padding: 10px;
      height: 30px;
      line-height: 30px;
      transition: all 1s;

    }

    .active {
      background-color: #409EFF;
      border-radius: 15px;
      color: #ffffff;
    }
  }

  .judge {
    width: 90%;
    margin: 20px auto;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 10px;
    text-align: start;
    min-height: 100px;
    box-sizing: border-box;

    div {
      margin: 10px auto;
    }

    .title {
      width: 100px;
      height: 30px;
      line-height: 30px;
      background-color: #409EFF;
      color: #ffffff;
      text-align: center;
      border-radius: 10px;
      margin-bottom: 20px;
    }
  }

  .list {
    width: 90%;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
    margin: 20px auto;
    display: flex;
    justify-content: flex-start;
  }
}
</style>